----- Coding Tutorial by Patt Vira ----- 

Name: Pixelated Kaleidoscope - Interactive

Video Tutorial: https://youtu.be/OqYJNQbr_X4

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

let cols; let rows; let size = 5;

let grid = []; let c = 0;

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  colorMode(HSB);

  cols = width/size;

  rows = height/size;

  for (let i=0; i<cols; i++) {

    grid[i] = [];

    for (let j=0; j<rows; j++) {

      grid[i][j] = color(250, 100, 50);

    }

  }

}

​

function draw() {

  background(100, 0, 100);

  stroke(color(250, 100, 10));

  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {

    if (mouseIsPressed) {

      x = floor(mouseX / size);

      y = floor(mouseY / size);

​

      let cell1 = createVector(x, y); 

      let cell2 = createVector(cols - 1 - x, y); 

      let cell3 = createVector(x, rows - 1 -y); 

      let cell4 = createVector(cols - 1 - x, rows - 1 - y); 

​

      grid[cell1.x][cell1.y] = c;

      grid[cell2.x][cell2.y] = c;

      grid[cell3.x][cell3.y] = c;

      grid[cell4.x][cell4.y] = c;

    }

  }

  for (let i=0; i<cols; i++) {

    for (let j=0; j<rows; j++) {

      fill(grid[i][j], 100, 100);

      rect(i*size, j*size, size, size);

    }

  }

  if (c < 360) {

    c += 1;

  } else {

    c = 0;

  }

}

​